<template>
  <slider-component></slider-component>
</template>

<script setup lang="tsx">
import { FormItem, Slider } from 'tdesign-vue-next';
import { inject, Ref } from 'vue';

import { TDFormItemType } from '../type.d';

const {
  componentAttribute = {},
  formItemAttribute = {},
  name,
} = defineProps<{
  componentAttribute: TDSliderType;
  name: string;
  formItemAttribute: TDFormItemType;
}>();

type TDSliderType = InstanceType<typeof Slider>['$props'];

const defaultComponentAttribute: TDSliderType = {};
const defaultFormItemAttribute: TDFormItemType = {
  name,
  rules: [
    {
      required: true,
      message: `${formItemAttribute.label || '此项'}必填`,
      trigger: 'change',
    },
  ],
};

const modelValue: Ref = inject('dynamicFormData');

const SliderComponent = (
  <FormItem {...defaultFormItemAttribute} {...formItemAttribute}>
    <Slider v-model={modelValue.value[name]} {...defaultComponentAttribute} {...componentAttribute} />
  </FormItem>
);
</script>

<style scoped></style>
